<style>
    #city-view .bg {
        width: 100vw;
        max-width: 750px;
        min-width: 320px;
        height: 100vh;
        position: fixed;
        top: 0;
        /* left: 0; */
        background: rgba(0, 0, 0, 0.5);
    }

    #city-view .city-wrap {
        background: #fff;
        width: 100vw;
        max-width: 750px;
        min-width: 320px;
        position: fixed;
        bottom: 0;
        /* left: 0; */
    }

    #city-view .city-wrap .li {
        line-height: 25px;
        border-bottom: 1px solid #eee;
        padding: 10px;
        font-size: 14px;
    }

    #city-view .city-wrap ul .li:last-child {
        border-bottom: 0;
    }

    #city-view .city-wrap .left {
        width: 40%;
        overflow-y: auto;
        height: 50vh;
        border-right: 1px solid #eee;
    }

    #city-view .city-wrap .right {
        width: 60%;
    }

    #city-view .city-wrap .right ul {
        width: 100%;
        overflow-y: auto;
        height: 50vh;
    }

    #city-view .city-wrap ul .li.active {
        color: #673AB7;
        font-weight: bold;
    }

    /* 按钮 */
    #city-view .btn-wrap {
        border-bottom: 1px solid #eee;
    }

    #city-view .btn-wrap .btn {
        color: #673AB7;
        font-size: 14px;
    }

    /* 选中的城市 */
    #city-view .select-wrap .tag {
        border: 1px solid;
        color: #673AB7;
        font-size: 12px;
        padding: 2px 10px;
        border-radius: 5px;
        margin: 5px;
    }
</style>

<div class="wrap" id="city-view">
    <div class="bg" onclick="closeModalFrm()"></div>
    <div class="city-wrap">
        <div class="select-wrap">
            <span class="tag" v-for="(m, index) in selectCity">{{m}}</span>
            <!-- <span class="tag">广州</span>
                <span class="tag">广州</span>
                <span class="tag">广州</span> -->
        </div>
        <div class="btn-wrap flex-bt new-padding-10">
            <button class="btn" onclick="closeModalFrm()">取消</button>
            <button class="btn" onclick="frmSubmit()">确定</button>
        </div>
        <div class="flex">
            <ul class="left">
                <li class="li" :class="{'active': index == 0}" v-for="(m, index) in proList"
                    @click="selectPro(index, $event)">{{m}}</li>
                <!-- <li class="li">1</li> -->
            </ul>
            <div class="right">
                <ul class="ul" :class="{'new-hide' : index != cityIndex}" v-for="(m, index) in city">
                    <li class="li " v-for="(c, cIndex) in m">{{c}}</li>
                </ul>
                <!-- <ul class="ul">
                        <li class="li ">120</li>
                        <li class="li active">120</li>
                    </ul> -->
            </div>
        </div>
    </div>
</div>
<script>
    var cityView = new Vue({
        el: '#city-view',
        data: {
            proList: province,
            city: city,
            cityIndex: 0,
            selectCity: []
        },
        methods: {
            selectPro: function (index, event) {
                var _this = this;
                var e = event.currentTarget;
                $(e).addClass('active').siblings().removeClass('active');
                _this.cityIndex = index;
            }
        }
    })
    $('#city-view .right').on('click', '.li', function () {
        var $this = $(this);
        var text = $this.text()
        var cls = $this.hasClass('active');
        var arr = cityView.selectCity;
        if (!cls) {
            if (arr.length == cityLen) {
                _msg('最多只能选择' + cityLen + '个城市');
                return;
            }
            $this.toggleClass('active');
            cityView.selectCity.push(text);
        } else {
            $this.toggleClass('active');
            for (var i = 0, len = arr.length; i < len; i++) {
                if (arr[i] == text) {
                    arr.splice(i, 1);
                    return;
                }
            }
        }

    })

    function frmSubmit() {
        if (cityView.selectCity.length == 0) {
            _msg('请选择至少一个城市');
            return;
        }
        var str = cityView.selectCity.join(',');
        _changeCity(str);
    }
</script>